<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蓉车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <link rel="stylesheet" type="text/css" href="css/shoppingCar.css">
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script type="text/javascript" src="plugin/vue/dist/vue.js"></script>
    <script type="text/javascript" src="plugin/axios/dist/axios.js"></script>
    <script type="text/javascript" src="script/common.js"></script>

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>
<body>
<div id="outer">
    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
          <span id="noLogin">
            <a href="javascript:void(0)" id="b-regist">注册</a>
            |
            <a href="#" id="b-login" class="b-login">登陆</a>
            |
             <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx03bd86056bd3fc0e&redirect_uri=http://wx.rongcarservice.com/callback.html&response_type=code&scope=snsapi_login&state=123456#wechat_redirect"
                id="b-wx-login">微信登陆</a>
            |
            <a href="/cartlist.html">购物车</a>
          </span>
                <span id="userHeaderInfo" style="display: none;">
                欢迎您!{{username}}
                <a href="#" id="b-logout" class="b-login" @click="logout" >登出</a>
          </span>
            </div>
            <div class="top-l">全国统一客服热线：8208208820</div>
            <div class="clear_fix"></div>
        </div>
    </div>
    <!-- 商品完成添加到购物车 -->
    <div class="cart-complete-wrap">
        <div class="cart-complete">
            <h3>
                <span style="position:relative;top: 10px;" >
                    <svg t="1686021512885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2551" width="28" height="28">
                        <path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m260.654545 425.425455l-279.272727 279.272727c-5.585455 5.585455-13.032727 9.309091-21.410909 9.309091-10.24 1.861818-20.48-0.930909-27.927273-8.378182l-175.941818-176.872727a30.906182 30.906182 0 0 1 0-43.752728l14.894546-14.894545c12.101818-12.101818 31.650909-12.101818 43.752727 0l141.498182 141.498182 244.829091-244.829091c12.101818-12.101818 31.650909-12.101818 43.752727 0L772.654545 381.672727c12.101818 12.101818 12.101818 31.650909 0 43.752728z" fill="#65B85D" p-id="2552"></path>
                    </svg>
                </span>
                商品已成功加入购物车！
            </h3>
            <div class="goods">
                <div class="left-good">
                    <div class="left-pic"><img :src="cartDetail.img" style="width:80px;height:80px"></div>
                    <div class="right-info">
                        <p>{{cartDetail.carTitle}}&nbsp;</p>
                        <p v-html="cartDetail.carInfo"></p>
                        <p class="attr"> 数量：x{{cartDetail.num}}</p>
                    </div>
                </div>
                
                <div class="right-gocart">
                    <div class="left-goCarLsit">
                        <a href="/list.html" style="color: #ef6767;">&lt; 继续购物  </a>
                    </div>
                    <!-- <span @click="lookDetail">查看商品详情</span> -->
                    <span class="btn-danger">
                        <a href="/cartlist.html" style="color: #eee;">去购物车结算 &gt; </a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    new Vue({
       el:'#outer',
       data:{
        cartDetail:{},
        username:""
       },
       methods:{
        logout(){
            localStorage.removeItem("token")
            localStorage.removeItem("loginUser")
            $('#userHeaderInfo').hide()
            $("#noLogin").show()
            location.href("/index.html")
        },
        getCarById(id){
            this.$http.get("/cart/"+id)
                .then(res => {
                    this.cartDetail = res.data.resultObj
                })
        }
       },
       mounted(){
        let loginUser = JSON.parse(localStorage.getItem("loginUser"))
        if(loginUser){
            this.username = loginUser.username
            $("#noLogin").hide()
            $('#userHeaderInfo').show()
        }
        let url = decodeURIComponent(location.href)
        let params = url.split("?")[1]
        let cartId = params.split("=")[1]
        this.getCarById(cartId)
       }
    })
</script>
<style  scoped>
    .cart-complete-wrap{
        background-color: #f4f4f4;
    }
    .cart-complete{
        width: 1200px;
        margin: 0 auto;
        text-align: left;
    }
    .cart-complete h3{
        font-weight: 400;
        font-size: 16px;
        color: #6aaf04;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0;
    }
    .cart-complete .goods {
        overflow: hidden;
        padding: 10px 0;
    }
    .cart-complete .goods .right-gocart {
        float: right;
    }
    .cart-complete .goods .right-gocart span {
        padding: 7px 36px;
        font-size: 15px;
        line-height: 22px;
        color: #333;
        background-color: #eee;
        text-decoration: none;
        box-sizing: border-box;
        border: 1px solid #e1e1e1;
    }
    .cart-complete .goods .right-gocart span:hover {
        background-color: #f7f7f7;
        border: 1px solid #eaeaea;
        cursor: pointer;
    }
    .cart-complete .goods .right-gocart span:active {
        background-color: #e1e1e1;
        border: 1px solid #d5d5d5;
    }
    .cart-complete .goods .right-gocart .btn-danger {
        background-color: rgb(249, 85, 77);
        color: #fff;
        float: right;
    }
    .cart-complete .goods .right-gocart .btn-danger:hover {
        background-color: #e1251b;
    }
    .cart-complete .goods  .left-good{
        float: left;
    }
    .cart-complete .goods .left-good .left-pic {
        float: left;
        margin-right:8px;
    }
    .cart-complete .goods .left-good .right-info {
        color: #444;
        font-size: 12px;
        float: left;
        width: 600px;
    }
    .cart-complete .goods .left-good .right-info img{
        width: 50px;
        height: 50px;
    }
    .cart-complete .goods .left-good .right-info .title {
        width: 100%;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }
    .cart-complete .goods .left-good .right-info .attr {
        margin-top: 10px;
        color: #aaa;
    }
    .cart-complete h3 .icon-pc-right {
        background-color: #fff;
        border: 2px solid #6aaf04;
        padding: 3px;
        margin-right: 8px;
        border-radius: 15px;
    }
    .left-goCarLsit{
        float: left;
        width: 165px;
        background-color: #0cd9f0;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size:16px;
        font-weight: 600;
        margin-top: 1px;
    }
    </style>
</html>